<div class="container">
  <page-header title="Queries"></page-header>

  <div class="row">
    <div class="col-md-3 list-control-t">
      <div class="m-b-10">
        <input type="text" class="form-control" placeholder="Search Queries..." autofocus ng-model="$ctrl.searchTerm" ng-model-options="{ allowInvalid: true, debounce: 200 }" ng-change="$ctrl.update()">
      </div>

      <div class="list-group m-b-10 tags-list tiled">
        <a href="queries" class="list-group-item" ng-class="{active: $ctrl.currentPage == 'all'}">
          All Queries
        </a>
        <a href="queries/favorites" class="list-group-item" ng-class="{active: $ctrl.currentPage == 'favorites'}">
          <span class="btn-favourite">
            <i class="fa fa-star" aria-hidden="true"></i>
          </span>
          Favorites
        </a>
        <a href="queries/my" class="list-group-item" ng-if="$ctrl.showMyQueries" ng-class="{active: $ctrl.currentPage == 'my'}">
          <img ng-src="{{$ctrl.currentUser.profile_image_url}}" class="profile__image--navbar" width="13" style="margin-right: 0;"
          /> My Queries
        </a>
      </div>

      <div ng-if="$ctrl.currentPage != 'my'">
        <div class="m-b-10">
          <tags-list tags-url="api/queries/tags" on-tags-update="$ctrl.onTagsUpdate"></tags-list>
        </div>
      </div>

      <div class="m-b-10">
        <select ng-change="$ctrl.update()" ng-model="$ctrl.pageSize" class="form-control"
          ng-options="value as $ctrl.pageSizeLabel(value) for value in $ctrl.pageSizeOptions"></select>
      </div>

    </div>

    <div ng-if="!$ctrl.loaded" class="col-md-9 list-content text-center">
      <big-message icon="'fa-spinner fa-2x fa-pulse'" message="'Loading...'"></big-message>
    </div>

    <div ng-if="$ctrl.loaded && $ctrl.showEmptyState" class="col-md-9 list-content">
      <div ng-switch="$ctrl.emptyType">
        <div ng-switch-when="default">
          <empty-state icon="fa fa-code" illustration="query" description="Getting the data from your datasources." help-link="https://help.redash.io/category/21-querying"></empty-state>
        </div>

        <div ng-switch-when="my" class="tiled bg-white p-15">
          <a href="/queries/new" class="btn btn-primary btn-sm">Create your first query</a> to populate My Queries list. Need help? Check out our
          <a href="https://redash.io/help/user-guide/querying/writing-queries">query writing documentation</a>.
        </div>

        <big-message ng-switch-when="favorites" message="'Mark queries as Favorite to list them here.'" icon="'fa-star'" />
        <big-message ng-switch-when="search" message="'Sorry, we couldn\'t find anything.'" icon="'fa-search'"></big-message>
        <no-tagged-objects-found ng-switch-when="tags" object-type="'queries'" tags="$ctrl.selectedTags" />
      </div>

    </div>

    <div ng-if="$ctrl.loaded && !$ctrl.showEmptyState" class="col-md-9 list-content">

      <div class="bg-white tiled">
        <table class="table table-condensed table-hover table-data">
          <thead>
            <tr>
              <th></th>
              <th class="sortable-column" ng-click="$ctrl.paginator.orderBy('name')">
                Name
                <sort-icon column="'name'" sort-column="$ctrl.paginator.orderByField" reverse="$ctrl.paginator.orderByReverse"></sort-icon>
              </th>
              <th></th>
              <th class="sortable-column" ng-click="$ctrl.paginator.orderBy('created_at')">
                Created At
                <sort-icon column="'created_at'" sort-column="$ctrl.paginator.orderByField" reverse="$ctrl.paginator.orderByReverse"></sort-icon>
              </th>
              <th class="sortable-column" ng-click="$ctrl.paginator.orderBy('runtime')">
                Runtime
                <sort-icon column="'runtime'" sort-column="$ctrl.paginator.orderByField" reverse="$ctrl.paginator.orderByReverse"></sort-icon>
              </th>
              <th class="sortable-column" ng-click="$ctrl.paginator.orderBy('executed_at')">
                Last Executed At
                <sort-icon column="'executed_at'" sort-column="$ctrl.paginator.orderByField" reverse="$ctrl.paginator.orderByReverse"></sort-icon>
              </th>
              <th class="sortable-column" ng-click="$ctrl.paginator.orderBy('schedule')">
                Update Schedule
                <sort-icon column="'schedule'" sort-column="$ctrl.paginator.orderByField" reverse="$ctrl.paginator.orderByReverse"></sort-icon>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="query in $ctrl.paginator.getPageRows()" ng-click="$ctrl.navigateTo($event, 'queries/' + query.id)">
              <td class="p-r-0">
                <favorites-control item="query"></favorites-control>
              </td>
              <td class="table-main-title">
                <a href="queries/{{query.id}}">{{query.name}}</a>
                <query-tags-control class="d-block" tags="query.tags" is-draft="query.is_draft" is-archived="query.is_archived"></query-tags-control>
              </td>
              <td class="p-r-0">
                <img ng-src="{{query.user.profile_image_url}}" class="profile__image_thumb" title="Created by {{query.user.name}}" />
              </td>
              <td>{{query.created_at | dateTime}}</td>
              <td>{{query.runtime | durationHumanize}}</td>
              <td>{{query.retrieved_at | dateTime}}</td>
              <td>{{query.schedule | scheduleHumanize}}</td>
            </tr>
          </tbody>
        </table>
        <paginator paginator="$ctrl.paginator"></paginator>
      </div>
    </div>

    <div class="col-md-3 list-control-r-b">
      <div class="m-b-10">
        <input type="text" class="form-control" placeholder="Search Queries..." autofocus ng-model="$ctrl.searchTerm" ng-model-options="{ allowInvalid: true, debounce: 200 }" ng-change="$ctrl.update()" />
      </div>

      <div class="list-group m-b-10 tags-list tiled">
        <a href="queries" class="list-group-item" ng-class="{active: $ctrl.currentPage == 'all'}">
          All Queries
        </a>

        <a href="queries/favorites" class="list-group-item" ng-class="{active: $ctrl.currentPage == 'favorites'}">
          <span class="btn-favourite">
            <i class="fa fa-star" aria-hidden="true"></i>
          </span>
          Favorites
        </a>
        <a href="queries/my" class="list-group-item" ng-if="$ctrl.showMyQueries" ng-class="{active: $ctrl.currentPage == 'my'}">
          <img ng-src="{{$ctrl.currentUser.profile_image_url}}" class="profile__image--navbar" width="13" style="margin-right: 0;"
          /> My Queries
        </a>
      </div>

      <div ng-if="$ctrl.currentPage != 'my'" class="m-b-10">
        <tags-list tags-url="api/queries/tags" on-tags-update="$ctrl.onTagsUpdate"></tags-list>
      </div>

      <div class="m-b-5">
        <select ng-change="$ctrl.update()" ng-model="$ctrl.pageSize" class="form-control"
          ng-options="value as $ctrl.pageSizeLabel(value) for value in $ctrl.pageSizeOptions"></select>
      </div>
    </div>
  </div>
</div>
